<template>
  <div class="annotate">
    <a-button type="primary" class="change-folder" @click="changeFolder()">
      <template #icon><FolderOpenOutlined /></template>
    </a-button>
    <a-drawer
      width="200"
      title="Select Dataset"
      placement="left"
      :closable="false"
      v-model:visible="visible"
      :get-container="false"
      :wrap-style="{ position: 'absolute' }"
      :after-visible-change="afterVisibleChange"
    >
      <!-- <p><a @click="changeDataset()">coco</a></p>
      <p>Some contents...</p>
      <p>Some contents...</p> -->
      <a-list item-layout="horizontal" :data-source="data">
        <template #renderItem="{ item, index }">
          <a-list-item>
            <a-list-item-meta>
              <template #title>
                <a @click="changeDataset(item)">{{ item.name }}</a>
              </template>
              <template #avatar>
                <!-- <a-avatar src="http://benyouhuifile.it168.com/forum/day_090925/20090925_8c2337a43011b0745f79xXhchGMGe6eF.jpg" /> -->
                <a-avatar :src="item.thumb_url"></a-avatar>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </a-drawer>
    <iframe :src="url" style="width:100%; height: 100%; border: 0"></iframe>
  </div>
</template>

<script>
import { FolderOpenOutlined } from '@ant-design/icons-vue'
export default {
  components: {
    FolderOpenOutlined, 
  },
  data() {
    return {
      url: this.$axios.defaults.baseURL + "/annotate/",
      visible: false,
      data: []
    }
  },
  methods: {
    changeFolder() {
      this.visible = true;
      this.$axios({
        url: "/annotate/getDatasetList",
        method: 'get',
      }).then(res =>{
        console.log(res.data)
        this.data = res.data;
      }).catch(err =>{
        console.log(err);
      })
    },
    afterVisibleChange(val) {
      // console.log('visible', val);
    },
    changeDataset(item) {
      this.url = this.$axios.defaults.baseURL + "/annotate/?dataset=" + item.name;
      this.visible = false;
    }
  }
}
</script>

<style scoped>
.annotate {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.change-folder {
  position: absolute;
  top: 80px; 
  left: 15px;
}
/deep/ .ant-btn-primary {
  color: #979797;
  background-color: #21293c;
  border-color: #21293c;
}
/deep/ .ant-btn-icon-only {
  font-size: 24px;
}
</style>